<template>
  <div class="box_container">
    <a-form
      :form="form"
      layout="inline"
      :label-col="{span: 8, offset: 1}"
      :wrapper-col="{span: 15}"
    >
      <a-row>
        <a-col  :md="8" :sm="24">
          <a-form-item label="部门名称">
            <a-input
              v-decorator="[ 'depname',validatorRules.depname,]"
              placeholder="请输入部门名称"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col  :md="8" :sm="24">
          <a-form-item label="上级部门">
            <a-select
              v-decorator="[ 'superior_dep_id',validatorRules.superior_dep_id,]"
              placeholder="请选择上级部门">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option
                v-for="(item) in departments"
                :key="item.id"
                :value="item.id">
                <span
                  style="display: inline-block;width: 100%"
                  :title=" item.name">
                  {{ item.name }}
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col  :md="8" :sm="24">
          <a-form-item label="" class="form-item-end-custom">
            <a-button type="primary" @click="handleSubmit()">保存</a-button>
            <a-button @click="$emit('update:showChild', false)">取消</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'AddDepartment',
  props: {
    showChild: {
      type: Boolean,
      default: false
    },
    openType: {
      type: Number,
      default: 0 // 0 添加 1 编辑
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    departments () {
      // console.log('1231', this.$store.getters['leave/departmentTree'])
      return this.$store.getters.departments
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, {}),
      ruleFormDep: {
        // 部门表单
        depname: '',
        superior_dep_id: '',
        company_id: '100'
      },
      validatorRules: {
        // 部门表单规则
        depname: { rules: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }]
        },
        superior_dep_id: { rules: [
          { required: false, message: '请输入部门名称', trigger: 'blur' }]
        }
      }
    }
  },
  created () {
    if (this.openType === 1) {
      this.ruleFormDep = Object.assign(this.ruleFormDep, this.formData)
      this.ruleFormDep.superior_dep_id = this.formData.superior_dep_id === '0' ? '' : this.formData.superior_dep_id
    }
  },
  mounted () {
    if (this.openType === 1) {
      this.form.setFieldsValue({
        'depname': this.ruleFormDep.depname,
        'superior_dep_id': this.ruleFormDep.superior_dep_id
      })
    }
  },
  methods: {
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('update:showChild', false)
          if (this.openType === 0) {
            values.company_id = '100'
            this.$emit('addDep', values)
          } else if (this.openType === 1) {
            values.id = this.formData.id
            values.company_id = this.formData.company_id
            this.$emit('changeNew', values)
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
